<template>
    <div class="accommodation-list" :class="!hadRole ? '' : 'accommodation-no-role'">
		<nav-header></nav-header>

        <div class="no-role" v-if="hadRole">
            您暂未分配该宿舍楼权限，请联系超级管理员开通~
        </div>
		<div v-else class="zh-table">
            <div class="zh-table-open clear">
                <div class="zh-open-right fr">
                    <el-button type="primary" @click="addDormitory('add')">新增宿舍楼</el-button>
                </div>
            </div>

            <div class="zh-table-contents" v-loading="loading.status" :element-loading-text="loading.txt">
                <el-table
                    :data="listData"
                    fixed
                    border
                    max-height="600"
                    style="width: 100%">
                    <el-table-column
                        type="index"
                        :index="tableIndex"
                        label="序号"
                        align="center"
                        show-overflow-tooltip
                        width="50">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="宿舍楼"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop=""
                        label="宿管账号"
                        align="center"
                        show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span>{{scope.row.housemaster_number ? scope.row.housemaster_number : '-'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop=""
                        label="宿管老师"
                        align="center"
                        show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{scope.row.housemaster_name ? scope.row.housemaster_name : '-'}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop=""
                        label="联系电话"
                        align="center"
                        show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{scope.row.telphone ? scope.row.telphone : '-'}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        align="center"
                        :width="210">
                        <template slot-scope="scope">
                            <el-button @click="addDormitory(scope.row)" type="text">编辑</el-button>
                            <el-button @click="goToDorm(scope.row.id)" type="text">宿舍列表</el-button>
                            <el-button @click="deleteConfirm(scope.row.id)" type="text" class="delete-button">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="table-pagination" v-show="totalNumber > 10">
                    <el-pagination
                        @size-change="setCurrentSize"
                        @current-change="setCurrentPage"
                        :current-page="listParam.pageIndex"
                        :page-sizes="[10, 20, 30, 40, 50, 100]"
                        :page-size="listParam.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalNumber">
                    </el-pagination>
                </div>
            </div>
        </div>

        <el-dialog 
            :title="dormTitle" 
            :visible.sync="dormVisible" 
            class="add-dorm-manage" 
            width="450px"
            :before-close="cancelDorm"
            :close-on-click-modal="false">
            <el-form :model="dormForm" :rules="rules" ref="dormForm" label-width="100px" class="demo-dorm-form">
                <el-form-item label="宿舍楼：" prop="name">
                    <el-input v-model="dormForm.name" maxLength="8" placeholder="示例：北苑2栋"></el-input>
                </el-form-item>
                <el-form-item label="宿管：">
                    <el-select v-model="dormForm.doorId" @change="getTelphone" filterable placeholder="请选择宿管">
                        <el-option
                            v-for="(item, inx) in doorLadyList"
                            :key="inx"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="联系电话：">
                    <el-input v-model="dormForm.phone" placeholder="请输入11位手机号" autocomplete="off" disabled></el-input>
                </el-form-item>
            </el-form>
            
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="cancelDorm" plain>取消</el-button>
                <el-button type="primary" @click="submitDorm('dormForm')">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            hadRole: true,
            dormVisible: false, // 是否显示弹出
            totalNumber: 0, // 列表总条数
            timeout:  null, // 缓存定时器
            dormTitle: '新增宿舍楼', // 弹窗标题
            listData: [], // 宿舍楼列表
            doorLadyList: [], // 宿管列表
            loading: { // 数据加载状态
                status: false,
                txt: '获取数据...'
            },
            listParam: {
                pageIndex: 1,
                pageSize: 10
            },
            dormForm: {
                id: null,
                name: '',
                doorId: '',
                phone: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入宿舍楼名称', trigger: 'blur' }
                ]
            }
        }
    },
    created() {
        if (this.$g.role_id.includes(1) || this.$g.role_id.includes(2)) {
            this.hadRole = false;
            this.getList();
            this.getDoorList();
        }
    },
    methods: {
        /**
         * 获取添加宿舍管理员列表 
         */
        getDoorList() {
            const success = (res => {
                this.doorLadyList = res.data;
            })

            this.$ajax.get('api/dormitory/getManageUser', {func: {success: success}})
        },
        /**
         * 获取住宿管理列表
         */
        getList() {
            this.loading.status = true;

            let success = (res=>{
                this.loading.status = false;
                this.listData = res.data.data;
                this.totalNumber = res.data.data_sum;
            })
            const params = {
                page_index: this.listParam.pageIndex,
                page_size: this.listParam.pageSize
            }

            this.$ajax.get('api/dormitory/dormitoryBuilding', {params, func:{success: success}})
        },
        /**
         * 获取宿管电话号码
         */
        getTelphone() {
            this.doorLadyList.forEach(item => {
                if (item.id === this.dormForm.doorId) {
                    this.dormForm.phone = item.telphone;
                }
            })
        },
        /**
         * 添加宿舍楼
         * @param {Number} val 编辑状态记录 id
         */
        addDormitory(val) {
            this.dormVisible = true;

            if (val === 'add') {
                this.dormTitle = '新增宿舍楼';
                this.dormForm = {
                    id: null,
                    name: '',
                    doorId: '',
                    phone: ''
                }
            } else {
                this.dormTitle = '编辑宿舍楼';
                this.dormForm = {
                    id: val.id,
                    name: val.name,
                    doorId: val.housemaster_id ? val.housemaster_id : undefined,
                    phone: val.telphone
                } 
            }
            
            this.$nextTick(() => {
                this.$refs.dormForm.clearValidate();
            })
        },
        /**
         * 保存宿舍楼信息
         * @param {String} formName 表单标识
         */
        submitDorm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    const success = (res => {
                        this.dormVisible = false;

                        this.getList();
                    })

                    if (this.dormForm.id) {
                        let params = {
                            id: this.dormForm.id,
                            name: this.dormForm.name,
                            housemaster_id: this.dormForm.doorId
                        }
                        this.$ajax.put("api/dormitory/dormitoryBuilding", params, {func: {success: success}});
                    } else {
                        let params = {
                            name: this.dormForm.name,
                            housemaster_id: this.dormForm.doorId,
                            create_id: this.$g.user_id
                        }
                        this.$ajax.post("api/dormitory/dormitoryBuilding", params, {func: {success: success}});
                    }
                } else {
                    return false;
                }
            });
        },
        /**
         * 取消弹窗
         */
        cancelDorm() {
            this.dormVisible = false;
        },
        /**
         * 跳到宿舍列表页
         * @param {Number} id 记录 id
         */
        goToDorm(id) {
            this.$router.push('/life/dormitory/dorm-list/' + id);
        },
        /**
         * 删除记录
         * @param {Number} id 记录 id
         */
        deleteConfirm(id) {
            let yes = (res => {
                this.deleteList(id);
            })
            let cancel = (res => {})

            this.e_confirm({yes: yes, cancel: cancel, txt: '确定要删除该宿舍吗？删除将不可恢复'});
        },
        /**
         * 删除数据
         * @param {String} id 删除的 id
         */
        deleteList(id) {
            this.loading.status = true;

            let success = (res => {
                this.$message.success(res.msg);
                
                if (this.listData.length - 1 === 0) {
                    if (this.listParam.pageIndex > 1) {
                        this.listParam.pageIndex-- ;
                    } else {
                        this.listParam.pageIndex = 1;
                    }
                }

                this.getList();
            });
            let fail = (res =>{
                this.$message.error(res.msg);

                this.getList();
            }) 
            
            this.$ajax.delete('api/dormitory/dormitoryBuilding',{params: {id}, func: {success: success, fail: fail}})
        },
        /**
         * 设置每页列表的数量
         * @param {Number} val 每页数据条数
         */
        setCurrentSize(val) {
            this.listParam.pageIndex = 1;
            this.listParam.pageSize = val;

            this.getList();
        },
        /**
         * 设置当前列表的页数
         * @param {Number} val 页数
         */
        setCurrentPage(val) {
            this.listParam.pageIndex = val;

            this.getList();
        },
        /**
         * 表格序号
         * @param {Number} index  序号
         */
        tableIndex(index) {
            return index + (this.listParam.pageIndex - 1) * this.listParam.pageSize + 1;
        },
    },
}
</script>

<style lang="scss">
    .accommodation-list {

    }
    .accommodation-no-role {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;

        .no-role {
            font-size: 20px;
        }
    }
</style>